// /* eslint-disable indent */
import React from 'react';

import TyTimePicker from '@ray-js/components-ty-time-picker';
import { View, Text, Image } from '@ray-js/ray';
import { DateTimePicker } from '@ray-js/smart-ui';
import { useSystemInfo } from '@/hooks/useSystemInfo';
import _ from 'lodash';
import Strings from '@/i18n';
import styles from './index.module.less';
import mh from './mh.png';

export function DoublePicker({ time1, time2, handlePickerChange, handleTime2Change, is24 }) {
  const onTimeInput = event => {
    const { detail } = event;

    const [hour, minute] = detail.split(':').map(Number);

    handlePickerChange({
      hour,
      minute,
    });
  };

  const onTime2Input = event => {
    const { detail } = event;

    const [hour, minute] = detail.split(':').map(Number);

    handleTime2Change({
      hour,
      minute,
    });
  };

  return (
    <>
      <View className={styles.pickerRow}>
        <View className={styles.pickerTitle}>
          <Text className={styles.pickerText}>{Strings.getLang('startTime')}</Text>
        </View>
        <View className={styles.pickerTitle}>
          <Text className={styles.pickerText}>{Strings.getLang('endTime')}</Text>
        </View>
      </View>
      <View className={styles.pickerContainer}>
        <DateTimePicker
          showToolbar={false}
          type="time"
          className={styles.picker}
          visibleItemCount={5}
          fontStyles={{
            '12HourClock': {
              fontSize: '14px',
              color: '#000',
            },
          }}
          columnClass={styles.columnClass}
          is12HourClock={false}
          value={`${time1.hour}:${time1.minute}`}
          onInput={onTimeInput}
          amText={Strings.getLang('AM')}
          pmText={Strings.getLang('PM')}
        />

        <DateTimePicker
          showToolbar={false}
          type="time"
          className={styles.picker}
          visibleItemCount={5}
          fontStyles={{
            '12HourClock': {
              fontSize: '14px',
              color: '#000',
            },
          }}
          columnClass={styles.columnClass}
          is12HourClock={false}
          value={`${time2.hour}:${time2.minute}`}
          onInput={onTime2Input}
          amText={Strings.getLang('AM')}
          pmText={Strings.getLang('PM')}
        />
      </View>
    </>
  );
}

export default DoublePicker;
